<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>喷发物分析仪-尘埃分析仪</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
    #window {
      fill: #fff;
      stroke: #fc5151;
      stroke-width: 2;
    }

    #target * {
      fill: #007bff;
      stroke: #27dbea;
      stroke-width: 2;
    }

    #viewer .card-header:before {
      height: 22px;
    }

    #viewer.M4 > div > div:nth-child(1), #viewer.M4 > div > div:nth-child(2) {
      display: none
    }

    #viewer.M4 > div > div:nth-child(3) {
      flex-grow: 1
    }
  </style>
</head>
<body id="viewer" class="M1">
<div id="CCC" style="padding: 4px 6px;display: flex;flex-direction: row">
  <button class="btn btn-primary btn-sm disactive-btn" onclick="main.realtime()" id="realtime">实时</button>
  <button class="btn btn-primary btn-sm mx-1" id="history" onclick="main.history()">历史</button>
  日期:
  <input id="day" type="date" value="">
  任务:
  <select id="task" class="sele-comp">
  </select>
  <!--  <span class="history">-->

  <label class=""> 科学数据包类型：</label>
  <select class=" sele-comp" id="modes" onchange="main.filter_frames(this.value)"></select>
  <label class="history">最大帧: </label>
  <label class="history" id="frm_max"></label>
  <label class=""> 数据帧:</label>
  <input class="" id="frm_input" type="number" oninput="this.nextElementSibling.value=this.value"
         style="width: 80px"
         maxlength="4">
  <input class="history" oninput="this.previousElementSibling.value=this.value" style="flex-grow: 2;padding:0;"
         id="frm_range" type="range" min="0" max="0" value="0" step="1">
  <div class="flex-grow-1"></div>
  <button class="btn btn-primary btn-sm history"  onclick="main.exportCSV(this,main.$$mode.val())"><i class="fa fa-file-text"></i>下载帧信息</button>
</div>
<div class="d-flex d-flex flex-row" style="height: calc(100vh - 37px)">
  <div class="history position-relative">
    <div id="thumbs" class="h-100 w-100 p-1 position-absolute" style="overflow-y: auto;">
    </div>
  </div>
  <div class="flex-grow-1 d-flex flex-column">
    <div id="ctrl" class="d-flex flex-row bg-light" style="height: 28px">
      <a class="fa fa-image btn  btn-r" onclick="$dld(main.cur_task,main.cur_frame.name+'.jpg')"></a>
      <!--      <a class="fa fa-download btn  btn-r" onclick="downfile()"></a>-->
      <label title="对比度" class="btn-r btn" style="display: none"><i class="fa fa-adjust"></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="亮度" class="btn-r btn" style="display: none "><i class="fa fa-sun-o "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="色调" class="btn-r btn " hidden><i class="fa fa-dashboard "></i>
        <input type="range" value="0" min="0" max="360"> </label>
      <label title="饱和度" class="btn-r btn " hidden><i class="fa fa-certificate "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"> </label>
      <button title="重置" class="btn-r btn " onclick="reset()">
        <i class="fa fa-refresh"></i>
        <i class="fa fa-circle-half"></i>
      </button>
      <span id="pos"></span>
      <span id="info"></span>

    </div>
    <div id="img-viewer" class="flex-grow-1">
      <div class="x-viewer" style="position: absolute;height: 100%;width: 100%;overflow: hidden">
        <img class="x-scale" id="frame_img" alt="" src=""></div>
    </div>
  </div>
  <div class="d-flex flex-column" style="width: 400px">
    <div class="card-header d-flex" id="info_title">
      数据
    </div>
    <div class="flex-grow-1  position-relative">
      <div class="position-absolute h-100 w-100" style="overflow-y: auto">
        <table id="params" class="table table-sm table-hover " style="vertical-align: middle"></table>
      </div>
    </div>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js?12"></script>
<script src="qv.js"></script>
<script src="cam-qv.js"></script>
<script>
  const ZMTD = {
    0: "第一通道", 1: "第二通道", 2: "双通道"
  }

  const MODE1_VAL = 'AB', MODE2_VAL = 'CB'
  MODE = {
    'CB': '类型2(微型相机)',
    'AB': '类型1',
  }


  let PARMAS = {
    CB: [
      {n: "科学数据同步码", k: "syn", v: new RawFmt('4X').X, r: '4X'},
      {n: "科学数据包序号", k: "cnt", r: '4X'},
      {n: "时间码", k: "time", v: BJT},
      {n: "图片序号", k: "p_cnt", r: '4X'},
      {n: "微型相机图像分包序号", k: "dp_cnt", r: '4X'},
      {n: "图片拍摄参数/PGA增益1", k: "PGA", v: (v => v * 0.2 + 1), r: '2X'},
      {n: "图片拍摄参数/ADC增益", k: "ADC", r: '2X'},
      {n: "曝光时间", k: "b_time", r: '4X'},
      {n: "CMV温度", k: "CMV_T", r: '2X'},
      {n: "FPGA温度", k: "FPGA_T", r: '2X'},
      {n: "照明通道", k: "TD", v: (v => ZMTD[v] || '-'), r: '2X'},
      {n: "计时秒", k: "s", r: '8X'},
      {n: "计时毫秒", k: "ss", r: '4X'},
      {n: "LED1电压参数", k: "LED1_U", r: '4X'},
      {n: "LED1电流参数", k: "LED1_I", r: '4X'},
      {n: "LED2电压参数", k: "LED2_U", r: '4X'},
      {n: "LED2电流参数", k: "LED2_I", r: '4X'},
      {n: "内核电压参数", k: "C_U", r: '4X'},
      {n: "内核电流参数", k: "C_I", r: '4X'},
      {n: "2.5V电压参数", k: "U_25", r: '4X'},
      {n: "2.5V电流参数", k: "I_25", r: '4X'},
      {n: "3.3V电压参数", k: "U_33", r: '4X'},
      {n: "3.3V电流参数", k: "I_33", r: '4X'},
      {n: "5V电压参数", k: "U_5", r: '4X'},
      {n: "5V电流参数", k: "I_5", r: '4X'},
    ],
    AB: [
      {n: '科学数据同步码', k: 'syn', v: new RawFmt('4X').X, r: '4X'},
      {n: '科学数据包序号', k: 'cnt', r: '4X'},
      {n: '时间码', k: 'time', v: BJT},
      {n: 'QCM传感器温度遥测(℃)', k: 'qcm_t', v: (i) => FMT_Fixed(i), r: '4X'},
      {n: 'QCM测量频率数据(Hz)', k: 'qcm_mf', v: (i) => FMT_Fixed(i), r: '8X'},
      {n: 'QCM参考频率数据(Hz)', k: 'qcm_rf', v: (i) => FMT_Fixed(i), r: '8X'},
      {n: 'VISTA单元SH1差频数据(Hz)', k: 'vista_sh1_df', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH1-RTD温度数据1(℃)', k: 'vista_sh1_rt1', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH1-RTD温度数据2(℃)', k: 'vista_sh1_rt2', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH1-PT1000温度数据1(℃)', k: 'vista_sh1_pt1', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH1-PT1000温度数据2(℃)', k: 'vista_sh1_pt2', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2差频数据(Hz)', k: 'vista_sh2_df', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2原始频率数据R 晶体(Hz)', k: 'vista_sh2_ofR', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2原始频率数据W 晶体(Hz)', k: 'vista_sh2_ofW', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2-RTD温度数据1(℃)', k: 'vista_sh2_rt1', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2-RTD温度数据2(℃)', k: 'vista_sh2_rt2', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2-PT1000温度数据1(℃)', k: 'vista_sh2_pt1', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA单元SH2-PT1000温度数据2(℃)', k: 'vista_sh2_pt2', v: (i) => FMT_Fixed(i), r: '6X'},
      {n: 'VISTA_MU当前工作阶段', k: 'vista_mu', r: '4X'},
      {n: 'AD1粒径数据采样最大值', k: 'ad1_max', r: '6X'},
      {n: 'AD1粒径通道飞行时间(μs)', k: 'ad1_ft', r: '2X'},
      {n: 'AD1粒径数据采样有效字节数', k: 'ad1_ec', r: '2X'},
      {n: 'AD2粒径数据采样最大值', k: 'ad2_max', r: '6X'},
      {n: 'AD2粒径通道飞行时间(μs)', k: 'ad2_ft', r: '2X'},
      {n: 'AD2粒径数据采样有效字节数', k: 'ad2_ec', r: '2X'},
      {n: 'AD3粒径数据采样最大值', k: 'ad3_max', r: '6X'},
      {n: 'AD3粒径通道飞行时间(μs)', k: 'ad3_ft', r: '2X'},
      {n: 'AD3粒径数据采样有效字节数', k: 'ad3_ec', r: '2X'},
      {n: '动量测量单元温度遥测(℃)', k: 'ch_t', v: (i) => FMT_Fixed(i), r: '4X'},
      {n: '尘埃飞行时间数据', k: 'df_time', r: '4X'}
    ]
  }
  /*st_frames = (frames) => {
    let curMode = $('#modes').val()
    r = {}
    frames.forEach(v => r[v.mode] = (r[v.mode] || 0) + 1)
    fr = Object.keys(MODE).filter(v => r[v]).map(v => `<option value="${v}" ${v == curMode ? 'selected' : ''}>${MODE[v]} / ${r[v]}</option>`)
    $('#modes').html(`<option value="">不限</option>` + fr.join(''))
  }*/

  class DMAViewer extends CamViewer {
    constructor() {
      super('ADVA-DMA');
      this._params = {AB: PARMAS.AB.map($param), CB: PARMAS.CB.map($param)}
      this.$$mode = $('#modes');
      this.$params = $$('#params')
      this.$params.onmousewheel = this.onwheel.bind(this)
      $('#frm_img_table').off('click')
      $('#frm_img_table').on('click', this.onclickFrmTable.bind(this))
    }


    params(v) {
      let i = v.info;
      let mode = v.mode
      if (this.ws) {
        this.$info.innerHTML = this._params[mode].map(c => c.view_tr(i)).join('')
        this.$$mode.val() == MODE2_VAL?this.set_img(v):$FRAME_IMG.src = '#';
        return
      }
      if(this.$$mode.val()==MODE2_VAL){
        this.$info.innerHTML = this._params[mode].map(c => c.view_tr(i)).join('')
        this.set_img(v)
      }else{
        this.$info.innerHTML = this._params[mode].map(c => c.view_tr(i)).join('')
        $FRAME_IMG.src = '#'
      }
    }

    onclickFrmTable() {
      if (this.$$mode.val() != MODE2_VAL) {
        window.alert('仅【科学数据包：类型2】支持帧图列表')
        return
      }
      this.history()
    }

    to_frm_table_view(){
      if (this.$$mode.val() == MODE1_VAL && (!this.ws)) {
        this.viewer.className = 'M4'
        this.loaded_frms_flag = false
      }else{
        this.viewer.className = 'M2'
        this.loaded_frms_flag = false
      }

    }

    to_frm_view() {
      this.clear_frame()
      if (this.$$mode.val() == MODE1_VAL && (!this.ws)) {
        this.viewer.className = 'M4'
        this.loaded_frms_flag = true
      }else{
        this.viewer.className = 'M3'
        this.loaded_frms_flag = true
      }
    }

    async realtime() {
      this.$$mode.val('')
      this.psize = 1
      this.$frmr.step = this.psize
      $REAL_FLAG = true
      this.clear_frame()
      super.realtime();
    }

    async frm_rang_change() {
      this.to_frm_view()
      super.frm_rang_change();
    }

    onwheel(e) {
      if (e.shiftKey) return
      if (this.checkABAndHist()) this.turnPage(e.wheelDelta < 0)
    }

    checkABAndHist() {
      if (this.mode === MODE1_VAL && (!$REAL_FLAG)) {
        return true
      }
      return false
    }

    turnPage(nextFlag) {
      let val = Number(this.$frmr.value)
      let next = val + (nextFlag ? +this.psize : -this.psize)
      this.$frmi.textContent = this.$frmi.value = this.$frmr.value = next;
      this.to_frm_view()
      this.show_params(this.frames[next]);
    }


    show_params(vv) {
      let info = vv.info
      if (vv.mode === MODE2_VAL)
        this.setCB(vv)
      else
        this.setAB(vv)
    }

    async set_thumbs() {
      $THUMB.innerHTML = this.frames.map((v, i) => {
        if (v.mode === MODE2_VAL)
          return `<div data=${i} class="thum-box">
                  <div class="head"><label>序号 ${v.frm}</label><label>${BJT(v.st)}</label></div>
                  <img src="/-/omsp.thumb?f=${this.cur_task}&n=${v.name}.jpg">
                </div>`
        else
          return ''
      }).join('')
    }

    filter_frames(mode) {
      super.filter_frames(mode);
      this.$frmr.step = this.psize = 1;
      this.viewer.className = this.ws ? 'M1' : (mode == MODE1_VAL ? 'M4' : 'M2')
      super.seek(this.$frmr.value)
    }

    setAB(v) {
      $FRAME_IMG.src = '#';
      if (!v) {
        this.set_params('')
      }
      if (this.ws || !this.mode) {
        this.params(v)
        this.viewer.className = this.ws ? 'M1' : 'M3'
        return;
      }
      this.$frmr.step = this.psize = 10;
      this.viewer.className = 'M4'

      let index = Math.floor(this.frames.indexOf(v) / this.psize) * this.psize;
      let frms = this.frames.slice(index, (index + this.psize))
      let rows = ['<tr>' + this._params.AB.map(v => `<th>${v.n}</th>`).join('') + '</tr>',
        ...frms.map(tr => {
          let info = tr.info
          if (tr.mode !== 'AB') return '<tr><td colspan="10"> DMI - 微型相机</td></tr>';
          let tds = this._params.AB.map(v => `<td>${v.fmt(info[v.k], info)}</td>`)
          return `<tr>${tds}</tr>`
        }).join('')]
      this.set_params(rows.join(''))
      $param()
    }

    setCB(v) {
      this.cur_frame = v;
      this.viewer.className = this.ws ? 'M1' : 'M3'
      this.set_img(v)
      this.params(v)
    }
  }


  var main = new DMAViewer()
  main.realtime()
</script>
</body>
</html>